<template>
    <nav>
        <van-icon @click="revTo" name="arrow-left" />
        <van-field center class="searchInput" v-model="text" placeholder="Ins风配饰"/>
        <van-button class="searchBtn" round >搜索</van-button>
    </nav>
    <section>
        <h4>历史搜索<van-icon name="delete-o" size="20px"/></h4>
        <div>
            <p v-for="item in [1,2,3,4,5,6,7,8]" :key="item">宽松</p>
        </div>
        <h4>搜索发现<van-icon name="eye-o" size="20px"/></h4>
        <div class="ulBox">
            <ul>
                <li>简约男装</li>
                <li>简约男装</li>
                <li>简约男装</li>
                <li>简约男装</li>
            </ul>
            <ul>
                <li>简约男装</li>
            </ul>
        </div>
        
    </section>
</template>
<script setup lang="ts">
import { ref } from "@vue/reactivity";

    let text = ref('')

    let revTo = ()=>{
        window.history.go(-1);
    }
</script>
<style lang="scss" scoped>
    nav{
        padding: 0.5rem;
        display: flex;
        justify-content: space-around;
        background: #eae9e5;
        .van-icon{
            line-height: 2rem;
            color: #c1ab96;
        }
        .searchInput{
            margin-left: 5px;
            background: #ffffff;
            border-radius: 50px;
            -webkit-text-fill-color: #c1ab96;
            height: 2rem;
            width: 70%;
        }
        .searchBtn{
            margin-left: 10px;
            background: #c1ab96;
            padding: 0 1rem;
            border: 1px solid #c1ab96;
            color: #ffffff;
            height: 2rem;
        }
    }
    section{
        padding: 1rem;
        h4{
            .van-icon{
                float: right;
                color: #c1ab96;
            }
        }
        div{
            padding: 1rem 0;
            display: flex;
            flex-wrap: wrap;
            p{
                padding: 0.2rem 0.6rem;
                margin: 5px;
                line-height: 1.5rem;
                border-radius: 50px;
                background: #f8e6d3;
                color: #ffffff;
            }
        }
        ul{
            width: 50%;
            li{
                line-height: 40px;
                font-size: 12px;
            }
        }
    }
</style>